<template>
  <div class="wrap">
    <div class="title">购物车</div>
    <div class="item" v-for="(item,index) of list" :key="id">
      <div class="check">
        <input type="checkbox" name="check" :checked="item.checked" @click="singlecheck(index)" />
      </div>
      <img :src="item.image" alt class="img" mode="aspectFit" />
      <div class="content">
        <div class="name">{{item.name}}</div>
        <div class="pricebottom">
          <div class="price">
            <span>￥{{item.price}}</span>
            <span>￥{{item.old_price}}</span>
          </div>
          <div class="button">
            <span @click="reduce(index)">-</span>
            <span>{{item.count}}</span>
            <span @click="add(index)">+</span>
          </div>
          <div class="del" @click="del(index)">删除</div>
        </div>
      </div>
    </div>
    <div class="result">
      <div class="left">
        <input type="checkbox" :checked="ischeck" @click="allcheck" />
        全选
        合计：￥{{total}}
      </div>
      <div class="right">结算</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      ischeck: true
    };
  },
  methods: {
    //减少
    reduce(index) {
      this.list[index].count -= 1;
      if (this.list[index].count <= 1) {
        this.list[index].count = 1;
      }
      wx.setStorageSync("cart", this.list);
    },
    // 增加
    add(index) {
      this.list[index].count += 1;
      wx.setStorageSync("cart", this.list);
    },
    //删除
    del(index) {
      this.list.splice(index, 1);
      wx.setStorageSync("cart", this.list);
      if (this.list.length == 0) {
        this.ischeck = false;
      }

      console.log(this.ischeck);
    },
    //单选···
    singlecheck(index) {
      this.list[index].checked = !this.list[index].checked;
      wx.setStorageSync("cart", this.list);
      //判断全选
      this.ischeck = this.list.every(item => {
        return item.checked == true;
      });
    },
    //全选
    allcheck() {
      this.ischeck = !this.ischeck; //全选取反
      this.list.forEach(item => {
        item.checked = this.ischeck;
      });
      //把页面数据存储到缓存
      wx.setStorageSync("cart", this.list);
    }
  },
  computed: {
    total() {
      var total = 0;
      this.list.forEach(item => {
        if (item.checked == true) {
          total += item.price * item.count;
        }
      });
      return total;
    }
  },
  created() {},
  onShow() {
    var list = wx.getStorageSync("cart") || [];
    this.list = list;
    // console.log(list);
    //判断全选

    if (this.list.length == 0) {
      this.ischeck = false;
    } else {
      this.ischeck = this.list.every(item => {
        return item.checked == true;
      });
    }
  }
};
</script>
<style scoped>
.wrap {
  width: 750rpx;
  /* border: 1rpx solid gold; */
  background-color: #f2f2f2;
}
.title {
  width: 750rpx;
  height: 95rpx;
  border-bottom: 1rpx solid #ccc;
  background-color: #fff;
  text-align: center;
  line-height: 95rpx;
}
.item {
  width: 710rpx;
  height: 240rpx;
  background-color: #fff;
  /* border: 1rpx solid firebrick; */
  margin: 20rpx;
  display: flex;
  border-radius: 10rpx;
}
.check {
  width: 62rpx;
  height: 240rpx;
  /* border: 1rpx solid firebrick; */
  line-height: 220rpx;
}
.img {
  width: 134rpx;
  height: 240rpx;
  /* border: 1rpx solid green; */
}
.content {
  width: 510rpx;
  height: 240rpx;
  /* border: 1rpx solid fuchsia; */
}
.content .name {
  width: 495rpx;
  height: 57rpx;
  /* border: 1rpx solid sienna; */
  margin-top: 35rpx;
}
.pricebottom {
  width: 495rpx;
  height: 130rpx;
  /* border: 1rpx solid firebrick; */
  display: flex;
  margin-top: 10rpx;
}
.pricebottom .price {
  width: 124rpx;
  height: 130rpx;
  /* border: 1rpx solid aqua; */
}
.pricebottom .price span {
  display: block;
  /* border: 1rpx solid violet; */
}
.pricebottom .price span:nth-child(1) {
  color: #fa3f38;
  font-size: 37rpx;
}
.pricebottom .price span:nth-child(2) {
  color: #ccc;
  text-decoration: line-through;
  font-size: 25rpx;
}
.button {
  width: 200rpx;
  height: 130rpx;
  /* border: 1rpx solid gold; */
  display: flex;
}
.button span {
  width: 56rpx;
  height: 56rpx;
  text-align: center;
  line-height: 56rpx;
  background-color: #ccc;
  margin: 0 5rpx;
  border-radius: 20rpx;
}

.del {
  width: 150rpx;
  height: 46rpx;
  border: 1rpx solid #ccc;
  border-radius: 20rpx;
  text-align: center;
  line-height: 46rpx;
}
.result {
  width: 750rem;
  height: 103rpx;
  display: flex;
}
.left {
  width: 450rpx;
  height: 91rpx;
}
.right {
  width: 240rpx;
  height: 91rpx;
  background-color: #eb1411;
  border-radius: 20rpx;
  color: #fff;
  line-height: 91rpx;
  text-align: center;
}
</style>